<template>
  <div class="curriculum-container">

    <!-- 搜索 -->
    <el-form :inline="true" class="demo-form-inline" :model="curriculumValue">
      <!-- 姓名手机号搜索 -->
      <el-form-item>
        <el-input placeholder="老师姓名" v-model="curriculumValue.search" style="width: 150px;" />
      </el-form-item>

      <!-- 课程状态选择 -->
      <el-form-item>
        <el-select v-model="curriculumStatuValue" placeholder="课程状态" style="width:100px">
          <el-option v-for="item in curriculumStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <!-- 课程分类选择 -->
      <el-form-item>
        <el-select v-model="curriculumCateValue" placeholder="课程分类" style="width:100px">
          <el-option v-for="item in curriculumCateOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <!-- 日期选择 -->
      <el-form-item>
        <el-date-picker v-model="curriculumValue.timeValue" type="daterange" start-placeholder="创建时间"
          end-placeholder="开课时间" style="width: 230px" value-format="x" @change="fn1" range-separator="--" />
      </el-form-item>

      <!-- 搜索 -->
      <el-form-item>
        <el-button type="primary" @click="toSerch">
          <el-icon style="font-weight:bolder; margin-right: 5px">
            <Search />
          </el-icon>
          搜索
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 课程表格数据 -->
    <el-table :data="filtercurriculumData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :border="true"
      style="width: 100%" class="curriculum-data" :table-layout="tableLayout" :header-cell-style="{
        background: '#ecf7ff',
        color: '#666666',
        fontWeight: '600',
        fontSize: '16px',
      }" :cell-style="cellStyle" :show-overflow-tooltip="true">
      <el-table-column prop="id" label="序号" />

      <el-table-column prop="curriculumName" label="课程名称" class="editName">
        <template #default="scope">
          <!-- //content绑定的是单元格中对应的值 -->
          <el-tooltip :content="scope.row.curriculumName" raw-content placement="top-start"
            v-if="scope.row.curriculumName">
            <!-- //判断单元格中有值，并且值的长度小于等于6，显示单元格中的值 -->
            <span v-if="scope.row.curriculumName && scope.row.curriculumName.length <= 6">
              {{ scope.row.curriculumName }}
            </span>
            <!-- //如果单元格中有值，并且值得长度大于6，便使用substr截取0-15的内容显示，后面的变成省略号 -->
            <span v-if="scope.row.curriculumName && scope.row.curriculumName.length > 6">
              {{ scope.row.curriculumName.substr(0, 6) + "..." }}
            </span>
          </el-tooltip>
          <span v-else-if="scope.row.curriculumName == null"> NA </span>
        </template>
      </el-table-column>


      <el-table-column prop="curriculumShowStatu" label="展示状态">
        <template #default="{ row }">
          <el-tag v-if="row.curriculumShowStatu == true">已上架</el-tag>
          <el-tag type="danger" v-else-if="row.curriculumShowStatu == false">已下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="curriculumStatu" label="课程状态">
        <template #default="{ row }">
          <el-tag type="warning" v-if="row.curriculumStatu == 1">进行中</el-tag>
          <el-tag type="info" v-else-if="row.curriculumStatu == 2">已结束</el-tag>
          <el-tag v-else-if="row.curriculumStatu == 0">未开课</el-tag>
          <el-tag v-else="row.curriculumStatu == ''">-</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="curriculumCate" label="分类" />
      <el-table-column prop="curriculumPhoto" label="封面图">
        <template #default="scope">
          <img :src="scope.row.curriculumPhoto" alt="" style="width: 46px;height: 30px;">
        </template>
      </el-table-column>
      <el-table-column prop="curriculumTeacher" label="老师" />
      <el-table-column prop="curriculumGrade" label="年级" />
      <el-table-column prop="curriculumTime" label="课时" />
      <el-table-column prop="curriculumPrice" label="价格" />
      <el-table-column prop="curriculumCreateTime" label="创建时间">
        <template #default="{ row }">
          <span>{{ dayjs.unix(row.curriculumCreateTime).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="curriculumStart" label="开课时间">
        <template #default="{ row }">
          <span>{{ dayjs.unix(row.curriculumStart).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="curriculumOperation" label="操作">
        <template #default="{ row }">
          <el-button type="primary" :icon="Edit" circle disabled />
          <el-button type="primary" :icon="Document" circle disabled />
        </template>

      </el-table-column>

    </el-table>

    <el-pagination background layout="prev, pager, next" :total="totalSize" :page-size="pageSize"
      :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      class="pagination-box" />
  </div>
</template>

<script>
export default {
  name: "courseComponent",
};
</script>

<script setup>
import { onMounted, reactive, ref, computed } from 'vue'
import { Search, Edit, Document } from '@element-plus/icons-vue';
import { getCourse } from '../../api/user';
import dayjs from 'dayjs';

const curriculumData = ref([])
const filtercurriculumData = ref([])
const maxTime = ref(null)
const minTime = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)

// 表格宽度自适应  
const tableLayout = ref('auto')
// 课程状态
const curriculumStatuValue = ref('all')
// 课程分类
const curriculumCateValue = ref('all')
// 姓名或手机号选择
const curriculumValue = reactive({
  search: '',       // 手机号或姓名
  timeValue: '',    // 日期
})

const totalSize = computed(() => {
  return filtercurriculumData.value.length
})

const fetchData = async () => {
  curriculumData.value = await getCourse()
  filtercurriculumData.value = curriculumData.value
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 蓝色字体
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.label === '价格') {
    return {
      color: '#1485fe'
    }
  }
}

// 获取时间选择器选择的值
const fn1 = (timer) => {
  minTime.value = timer[0] / 1000
  maxTime.value = timer[1] / 1000
}

// 课程状态
const curriculumStatusOptions = computed(() => {
  let temp = []
  curriculumData.value?.forEach((item) => {
    if (temp.findIndex((abc) => abc.value == item.curriculumStatu) != -1) return
    temp.push(
      {
        value: item.curriculumStatu,
        label: item.curriculumStatu == 0 ? "未开课" : item.curriculumStatu == 2 ? "已结束" : "进行中"
      }
    )
  })
  temp.unshift({
    value: "all",
    label: "全部"
  })
  return temp
})

// 课程分类
const curriculumCateOptions = computed(() => {
  let temp = []
  curriculumData.value?.forEach((item) => {
    if (temp.findIndex((abc) => abc.label == item.curriculumCate) != -1) return
    temp.push(
      {
        value: temp.length + 1,
        label: item.curriculumCate,
      }
    )
  })

  temp.unshift({
    value: "all",
    label: "全部"
  })
  return temp
})

// 搜索
const toSerch = () => {
  if (!curriculumValue.search && curriculumStatuValue.value == "all" && curriculumCateValue.value == "all" && !minTime.value) {
    filtercurriculumData.value = curriculumData.value
    return
  }

  filtercurriculumData.value = curriculumData.value.filter((item) => {
    return ((curriculumValue.search ? (item.curriculumTeacher.includes(curriculumValue.search)) : "false") && (curriculumStatuValue.value != "all" ? (item.curriculumStatu == curriculumStatuValue.value) : "false") && (curriculumCateValue.value != "all" ? (item.curriculumCate == curriculumCateOptions.value[curriculumCateValue.value].label) : "false") && (minTime.value ? (item.curriculumCreateTime >= minTime.value && item.curriculumStart <= maxTime.value) : "false"))
  })
}

onMounted(() => {
  fetchData()
})

</script>

<style lang="scss" scoped>
.demo-form-inline {
  display: flex;
}

.curriculum-container {
  height: 100%;
  min-height: 600px;
  padding: 32px;
  box-sizing: border-box;
}

.curriculum-data {
  width: 100%;
  height: 100%;
  border: 1px solid #eeeeee;
}

:deep(.el-table .el-table__cell) {
  text-align: center;
}

.pagination-box {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>